import MarkDownIt from 'markdown-it'
import hljs from 'highlight.js'

import "highlight.js/styles/github-dark-dimmed.css"
import "highlight.js/styles/vs2015.css"
import '@/assets/css/heleol.css'

import { ElNotification } from 'element-plus'

import copyImg from '@/assets/img/chat/copy.png'

//封装markDown 和 copy  以及 element 的 ElNotification

window.myCopy = function(button){
  console.log('button', button);
  const copyBoxData = button.nextElementSibling;
  // const textArea = document.createElement('textarea');
  // document.appendChild(textArea)
  // document.execCommand('copy')
  // document.body.removeChild(textArea)
  navigator.clipboard.writeText(copyBoxData.innerText)
    .then(() => {
      console.log('复制成功');

      if (ElNotification){
        ElNotification({
          type: 'success',
          message: '复制成功'
        })
      }else{
        alert('复制成功')
      }


    })
    .catch((err) => {
      console.error('Failed to copy text: ', err);
    });
}

// 创建实例
const md:any = new MarkDownIt({
  html: true, // 允许html标签
  linkify: true, // 自动转换url
  typographer: true, //启用一些语言中立的替换 + 引号美化
  // 高亮函数，会返回转义的HTML。
  // 如果结果以 <pre ... 开头，内部包装器则会跳过。
  highlight: function (str:any, lang:any) { 
    //检测到是代码
    if (lang && hljs.getLanguage(lang)) {
      try {
        // 得到经过highlight.js之后的html代码
        const preCode = hljs.highlight(lang, str, true).value
        // 以换行进行分割
        const lines = preCode.split(/\n/).slice(0, -1)
        // 添加自定义行号
        let html = lines.map((item, index) => {
          return '<li><span class="line-num" data-line="' + (index + 1) + '"></span>' + item + '</li>'
        }).join('')
        html = '<ol style="font-weight:500;">' + html + '</ol>'
        // 添加代码语言
        // if (lines.length) {
        //   html += '<b class="name">' + lang + '</b>'
        // }
        return '<pre class="hljs">'+
          '<b class="name">' + lang + '</b>'+
          '<div class="copybtnMsg" onclick="myCopy(this)">' +
          `<img src="${copyImg}" />`
          + '</div>'
        +'<code style="font-weight:500;">' +
          html +
          '</code></pre>'
      } catch (__) { }
    }
    // 未添加代码语言，此处与上面同理
    const preCode = md.utils.escapeHtml(str)
    const lines = preCode.split(/\n/).slice(0, -1)
    let html = lines.map((item, index) => {
      return '<li><span class="line-num" data-line="' + (index + 1) + '"></span>' + item + '</li>'
    }).join('')
    html = '<ol>' + html + '</ol>'
    return '<pre class="hljs"><code style="font-weight:500;">' +
      html +
      '</code></pre>'
  }
})

export default md